<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
	<jsp:include page="../inc_min.jsp"></jsp:include>
	<jsp:include page="../inc_bootstrap.jsp"></jsp:include>
<meta http-equiv="X-UA-Compatible" content="edge" />
<title>账户管理-账户查询</title>
<link rel="stylesheet" href="${ctx}/css/page.css"/>
<script type="text/javascript">
	$(function(){
		
		/* 状态栏动态效果 */
		$(".listArg").click(function(){
			$(".listArg").css({
				"background": "#f1f1f1",
				"color": "black"
			});
			$(this).css({
				"background": "#28aaf0",
				"color": "#FFFFFF"
			});
			var conStatus=$(this).find("span").attr('id');
		});
		
		
		
		//填充页面第一个表格信息
		function getAjax(){
			$.ajax({
				type:"get",
				url:'${ctx}/tradeList/page?page=1&rows=10&temp='+Math.random(),
				async:true,
				dataType:"json",
				success:function(data){
					if(data.rows.length > 0){
						$("#availableBalance").html(CommonConverter.toZero(data.rows[0].availableBalance));
						$("#freezeAmount").html(CommonConverter.toZero(data.rows[0].freezeAmount)); 
					}else{
						$("#availableBalance").html(0);
						$("#freezeAmount").html(0);
					};
					
				},
				error:function(){
					layer.alert("请检查网络连接，然后重试！");
				}
			});
		};
		getAjax();

		//全选
		$("#query").click(function (){
			gridSearch('');
			getAjax();
		});
		 //加载列表信息
        $('#bootTable').bootstrapTable({
        	url:'${ctx}/tradeList/page?temp='+Math.random(),
            dataType: "json",
            //contentType: "application/x-www-form-urlencoded",
            method: 'get',
            cache: false,
            height: "auto",//
            pagination: true,
            pageSize: 20,
            pageNumber:1,
            pageList: [ 20, 50, 100, 200, 500],
            striped: false,
            search: false,
            showColumns: false,
            showRefresh: false,
            clickToSelect: true,
            idField:'id',
            //toolbar: "#toolbar",
            paginationHAlign: 'left',
            paginationDetailHAlign: 'right',
            sidePagination: "server", //表示服务端请求
            queryParamsType : "undefined",
            //queryParams: queryParams,//参数
            columns: [
                {field:"id",title:"",align:"center",valign:"middle",visible:false},
                {field:"payOrderNumber",title:"支付单号",align:"center",valign:"middle"},
                {field:"createTime",title:"日期",align:"center",valign:"middle"},
                {field:"toTradeStr",title:"类型",align:"center",valign:"middle",
					formatter:function(value,row,index){
						var str=CommonConverter.toTradeStr(row.tradeType);
						return str;
					}
                },
                {field:"income",title:"收入（元）",align:"center",valign:"middle"},
                {field:"cost",title:"支出（元）",align:"center",valign:"middle"},
                {field:"accountBalance",title:"账户余额（元）",align:"center",valign:"middle"},
                {field:"payType",title:"支付方式",align:"center",valign:"middle",
					formatter:function(value,row,index){
                   		var str=CommonConverter.toPaystr(row.payType);
                   		return str;
                	}
                },
				{field:"remark",title:"备注",align:"center",valign:"middle"}
            ],
            formatNoMatches: function(){
                return '无符合条件的记录';
            }
        });

		//点击充值
		$("#recharge").click(function(){
			layer.open({
				type: 2,
				title: ['充值','background-color:#00B2EE; color:#fff;'],
				shadeClose: true,
				shade: 0.5,
				area: ['500px', '300px'],
				content: ['${ctx}/np/tradeRecharge', 'no'],
				end:function(){
					getAjax();
					$("#table").datagrid("reload");
				}
			});
		});
		
		//点击提现按钮
		$("#withdraw").click(function(){
			layer.open({
				type: 2,
				title: ['提现','background-color:#00B2EE; color:#fff;'],
				shadeClose: true,
				shade: 0.3,
				area: ['400px', '250px'],  
				content: ['${ctx}/np/withdraw','no'], //iframe的url，no代表不显示滚动条
				end:function(){
					$("#table").datagrid("reload");
				}
			});
		});
	});
		//余额为空  变成0
		function toZero(rows,money){
			if(rows.length == 0){
				return 0;
			}else{
				return money;
			};
		};

	function gridSearch(status) {
		var payOrderNumber=""; //支付单号
		var startDate="";//开始日期
		var endDate="";//结束日期
		payOrderNumber=$("#_orderNumber").val();
		startDate=$("#startDate").val();
		endDate=$("#endDate").val();
		var param = {query:{
			pageNumber: 1,
			pageSize: 20,
			payOrderNumber:payOrderNumber,
			startTime:startDate,
			endTime:endDate,
			tradeType:status
		}};
		$('#bootTable').bootstrapTable('refresh',param);
	}
		
</script>
</head>
<body>
	<jsp:include page="../head.jsp"></jsp:include>
	<div class="content">
			<ul class="list" style="background:#f6f6f6;height:43px;margin:0 auto;">
				<li>
					账户余额：<span id="availableBalance" class="red"></span>元&nbsp;&nbsp;&nbsp;&nbsp;
					冻结押金：<span id="freezeAmount" class="red"></span>元
				</li>
				<li class="right">
					<c:if test="${fn:contains(sessionInfo.resourceList, '/np/tradeWithdraw')}">
						<button class='query' id="withdraw" style="border:none;background:#f9a61a;">提现</button>
					</c:if>
				</li>
				<li class="right">
					<c:if test="${fn:contains(sessionInfo.resourceList, '/np/tradeRecharge')}">
						<button class='query' id="recharge" style="border:none;background:#ff7777;margin-right:-30px;">充值</button>
					</c:if>
				</li>
			</ul> 
			<ul class="list" style="margin-top:0;">
					<li>支付单号：<input style='width:120px;height:22px' id="_orderNumber" /></li>
					<li>
						日期 ：<input type="text" style="height:22px;" id="startDate" class="Wdate"  value="${requestScope.deptDate}" onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'/*,minDate:'%y-%M-\#{%d+2}',maxDate:'#F{$dp.$D(\'endDate\')}'*/})"/>
					至<input type="text" style="height:22px;" id="endDate" class="Wdate"  value="${requestScope.endDate}" onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'/*,minDate:'#F{$dp.$D(\'startDate\')}'*/})">
					<li>
					<!-- <li>
						类型
						<select id="tradeType" style="width: 73px;">
							<option value="">所有</option>
							<option value="0">票款</option>
							<option value="1">押金</option>
							<option value="2">提现</option>
							<option value="3">充值</option>
						</select>
					</li> -->
					<li class="right"><button class='query' id="query">查询</button></li>
					
					
					<!-- <li><button class='query' id="query">解冻说明</button></li> -->
				</ul>
				<ul class="list conditionList">
					<li>状态：</li>
					<li class="listArg allStatus" onclick="gridSearch('')" >
						<span/>全部</span>
					</li>
					<li class="listArg" onclick="gridSearch('0')">
                        <span>票款</span>
					</li>
					<li class="listArg" onclick="gridSearch('1')">
						<span>押金</span>
					</li>
					<li class="listArg" onclick="gridSearch('2')">
						<span>提现</span>
					</li>
					<li class="listArg" onclick="gridSearch('3')">
						<span>充值</span>
					</li>
			   </ul>
			   <div class="tableBox">
			   		<table id="bootTable"></table>
			   </div>
	</div>
	<jsp:include page="../footer.jsp"></jsp:include>
</body>
</html>